<template>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col :span="18">
      <div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#393D49"
          text-color="#fff"
          active-text-color="aqua"
          router
        >
          <el-menu-item index="/home"><i class="el-icon-s-home"></i><span slot="title">主页</span></el-menu-item>
          <el-menu-item index="/about"><i class="el-icon-s-promotion"></i><span slot="title">关于</span></el-menu-item>
          <el-menu-item index="/profile"><i class="el-icon-setting"></i><span slot="title">个人中心</span></el-menu-item>
          <el-menu-item index="/writeBlog"><i class="el-icon-edit"></i><span slot="title">写博客</span></el-menu-item>
          <el-menu-item v-if="!this.$store.getters.getIsLogin" index="/login">登录</el-menu-item>
        </el-menu>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "top-navbar",
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style>
.row-bg {
  background-color: #393d49;
}
</style>